<template>
	<div class="xuan_school">
		<div class="header">
			   <van-nav-bar
				  title="分类收集"
          left-arrow
				  @click-left="onClickLeft"
				 />
		</div>
      <!--列表--->
    <van-tabs @click="onClick" v-model="active">
			  <van-tab v-for="(index,i) in tab_item" :title="index.name" :key="i" >


          <div v-show="show_0">
            <van-cell-group>
              <van-field
                v-model="username"
                label="垃圾单位"
                disabled
                placeholder="请输入您的公司名称"

              />
              <van-field
                v-model="g_type"
                label="垃圾种类"
                readonly
                placeholder="请选择垃圾种类"
                @click="show_g_type = true"
              />

              <van-popup v-model="show_g_type" position="bottom">
                <van-picker
                  show-toolbar
                 :columns = "garbagetypes"
                  @cancel="show_g_type = false"
                  @confirm="onConfirm_g_type"
                />
              </van-popup>

              <div class="danwei">
                <van-field
                  type="number"
                  v-model="garbageCount"
                  center
                  clearable
                  label="垃圾数量">
                  <span slot="button" size="small" type="primary" style="color: #4C9FFDFF;"
                        @click="show_unit = true">{{unit_val}}</span>
                </van-field>
                <van-popup v-model="show_unit" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns = "units"
                    @cancel="show_unit = false"
                    @confirm="onConfirm_unit"
                  />
                </van-popup>
              </div>
              <van-field
                v-model="en_user"
                label="运输公司"
                placeholder="请选择运输公司"
                readonly
                @click="show_en = true"
              />
              <van-popup v-model="show_en" position="bottom">
                <van-picker
                  show-toolbar
                  :columns = "enterregister"
                  @cancel="show_en = false"
                  @confirm="onConfirm_en"
                />
              </van-popup>
            </van-cell-group>
            <van-button round size="large" type="info" @click="sub_info">确认提交</van-button>
          </div>




              <!-- 此处遍历数据-->
			    <div  id="list-content" v-show="show_1">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                  <van-list
                    v-model="loading"
                    :finished="finished"
                    @load="onLoad"
                    finished-text="没有更多了"
                    :immediate-check="immediate"
                    :offset="10"
                  >
                  <!--<div v-if="false">
                  	 <img src="../../assets/nolist.png" class="Img_sre_contet"/>
	                  <p style="color:#CCCCCCFF;">
	                  	<span>您还没有</span>
	                  	<br/>
	                  	<span style="display: inline-block;margin-top: 1vh;">上门回收的订单哦～</span>
	                  </p>
                  </div>
                  -->


                  <!--
                  	作者：offline
                  	时间：2019-10-30
                  	描述：分类收集
                  -->


					  <!--
                      	作者：offline
                      	时间：2019-10-30
                      	描述：取消收集
                      -->

                      <div class="clollect_list quxiao" id="quxiao" v-for="(item,i) in items" :key="i">
                      	 <div class="coll_content">
                      	 	<p style="font-family:PingFang SC;
								font-weight:400;
								color:rgba(51,51,51,1);">{{item.garbage_type}}垃圾：{{item.garbage_count}} {{item.unit}}</p>
                      	 	<div class="collect_listcontent">
                      	 		<p>运输单位：{{item.transport_name}}</p>
                      	 		<p>
                              <van-button plain type="primary"
                                          @click="cancel_order(item.aId,i)"
                                          class="normal_btn"
                                          v-if="item.order_code == 2?true:false">取消收集</van-button>
                               <van-button plain type="primary"  class="red_btn"
                                           @click="re_order(item.aId,i)"
                                           v-if="item.order_code == 0?true:false">重新下单</van-button>
                                <van-button plain type="primary" class="green_btn" v-if="item.order_code == 1?true:false">打印凭证</van-button>
                      	 		</p>
                      	 	</div>

                      	 	<div>
                      	 		<p>
                      	 			<span style="font-family:PingFang SC;
                                    font-weight:400;
                                    font-size: 12px;
                                    margin-right: 3vh;
                                    color:rgba(153,153,153,1)">{{item.update_date | formatDate}}</span>
                                <!-- 完成 拒绝 等待 -->

                                <span v-if="item.order_code == 2?true:false" :class="{'state_c_yellow':item.order_code ==2}"><van-icon name="underway-o" />
                                   {{item.order_code | formatStatus}}
                                 </span>
                                <span v-if="item.order_code == 0?true:false" :class="{'state_c_red':item.order_code ==0}"><van-icon name="close" />
                                {{item.order_code | formatStatus}}({{item.reason}})
                                </span>
                                <span v-if="item.order_code == 1?true:false" :class="{'state_c_green':item.order_code ==1}"><van-icon name="passed" />
                                {{item.order_code | formatStatus}}
                                </span>
                                </p>
                      	 	</div>

                      	 </div>
                      </div>

                  </van-list>

                </van-pull-refresh>
             </div>
		    </van-tab>
    </van-tabs>

	</div>

</template>
<script>
    import {formatDate} from '../../utils/filters.js'
// require styles
//import BanVeriFy from '@/components/BanVeriFy';
    import { Dialog } from 'vant';
export default {
	  data(){
		  return{
          active:0,
          user:'',
			    tab_item:[{'name':'分类收集'},{'name':'收集订单'}],
          username:'',
          g_type:'',
          g_type_val:'',

          garbageCount:'',
          en_user:'',
          en_userId:'',
          enterregister:[],
          garbagetypes:[],
          units:[],
          show_g_type:false,
          show_unit:false,
          unit_val:'选择单位',
          show_en:false,
          show_0:true,
          show_1:false,
          items:[],
          page:0,
          isLoading:false,
          loading: false,   //是否处于加载状态
          finished: false, //是否已加载完所有数据
          immediate:false



		  }
	  },
    mounted(){
	      const that = this;
        let local_user = localStorage.getItem('user');
        if(local_user != undefined && local_user != "undefined"){
            let user = JSON.parse(local_user);
            this.user = user;
            this.username = this.user.name;
            that.get_type_unit_company();
        }else{
            Dialog.confirm({
						    title: '',
						    message: '请您先进行登录'
						}).then(() => {
						    // on confirm
						    this.$router.push({
						        path:'/'
						    })
						}).catch(() => {
						    // on cancel
						});
            return false;
        }




    },
    filters:{
        formatStatuscon(status,val){

            if(status==val ){
                return true;
            }else{
                return false;
            }
        },
        formatDate(time){
            var data = new Date(time);
            return formatDate(data,'yyyy-MM-dd');
        },
        formatStatus(status){
            if(status=='0' ){
                return "已拒绝"
            }else if(status=='1'){
                return "已完成"
            }else if(status=='2'){
                return "等待中"
            }
            return "";
        }



    },
	methods: {
      cancel_order(aId,index){
          const that = this;
          Dialog.confirm({
              title: '',
              message: '您确定取消收集吗?'
          }).then(() => {
              that.$sendRequest('/collect_order/cancel_cpllect_order',"aId="+aId).then(function(res){

                  if(res.data.code ==0){

                      that.page = 0;
                      that.items=[];
                      that.getcpllect_order(0);
                  }

              })
          }).catch(() => {

          });

      },
      re_order(aId,index){
          const that = this;
          Dialog.confirm({
              title: '',
              message: '您确定重新下单吗?'
          }).then(() => {
              that.$sendRequest('/collect_order/cancel_cpllect_order',"aId="+aId).then(function(res){
                  if(res.data.code ==0){
                      that.show_0 = true;
                      that.show_1 = false;
                      that.active = 0;
                      that.g_type = '';
                      that.garbageCount = '';
                      that.unit_val = '选择单位';
                      that.en_user = '';
                      that.g_type_val='';
                      that.en_userId='';
                  }

              })
          }).catch(() => {

          });
      },
      sub_info(){
          const that = this;
          let p ="g_value="+this.g_type_val+"&en_userId="+this.en_userId+"&unit_name="+this.unit_val
              +"&userId="+this.user.userId+"&garbageCount="+this.garbageCount;

          that.$sendRequest('/collect_order/save_collect_order',p).then(function(res){
              console.log(res.data);
              if(res.data.code ==0){
                  that.$toast("提交成功");

                  that.onClick(1);

              }

          })
      },
	      //确认垃圾总类
      onConfirm_g_type(picker) {
          this.g_type = picker.text;
          this.g_type_val =  picker.val;
          this.show_g_type = false;
      },
      //确认单位
      onConfirm_unit(picker){
          this.unit_val = picker
          this.show_unit = false;
      },
      onClick(event) {
          if(event == 0){
              const  that = this;
              that.show_0 = true;
              that.show_1 = false;
              that.active = 0;
              that.g_type = '';
              that.garbageCount = '';
              that.unit_val = '选择单位';
              that.en_user = '';
              that.g_type_val='';
              that.en_userId='';


          }else if(event == 1){
              const  that = this;
              that.show_0 = false;
              that.show_1 = true;
              that.items=[];
              that.active = 1;
              that.getcpllect_order(0);
          }

      },
      onConfirm_en(picker){
        console.log(picker);
        this.en_user =picker.text;
        this.en_userId = picker.val;
        this.show_en = false;
      },
      onRefresh(){
          console.log("下拉刷新");
          const  that = this;
          that.isLoading = true;
          that.page = 0;
          that.items=[];
          that.getcpllect_order(0);

      },
      onLoad() {
          console.log("上拉加载");
          console.log(this.finished);
          if(this.items.length != 0){
              this.page = this.page+1;
          }
          this.getcpllect_order(1);
      },
      getcpllect_order(type){
          const that = this;
          let p = "userId="+that.user.userId+"&page="+that.page;
          console.log(p);
          that.$sendRequest('/collect_order/getcpllect_order',p).then(function(res){
              console.log(res.data);
              that.isLoading = false;
              that.loading = false;
              if(res.data.code ==0){
                  if(res.data.result.collectorders.length < 10){
                      that.finished = true;
                  }
                  for(var i = 0;i<res.data.result.collectorders.length;i++){
                      that.items.push(res.data.result.collectorders[i]);
                  }
                  if(type ==0){
                      that.finished = false;
                  }
              }

          })
      },
      get_type_unit_company(){
          const that = this;
          that.$sendRequest('/collect_order/get_type_unit_company',"aId="+that.user.userId).then(function(res){
              console.log(res.data);
              if(res.data.code ==0){

                  if(res.data.result.garbagetypes != null && res.data.result.garbagetypes.length>0){
                    for(var i = 0;i<res.data.result.garbagetypes.length;i++){
                        let garbagetype_obj = {};
                        garbagetype_obj.text = res.data.result.garbagetypes[i].g_type;
                        garbagetype_obj.val = res.data.result.garbagetypes[i].g_value;
                        that.garbagetypes.push(garbagetype_obj);
                    }
                  }

                  for(var i = 0;i<res.data.result.units.length;i++){
                      that.units.push(res.data.result.units[i].unit_name);
                  }
                  if(res.data.result.enterregister != null && res.data.result.enterregister.length>0){
                      for(var i = 0;i<res.data.result.enterregister.length;i++){
                          let obj = {};
                          obj.text = res.data.result.enterregister[i].enter;
                          obj.val = res.data.result.enterregister[i].en_userId;
                          that.enterregister.push(obj);
                      }
                  }

              }

          })
      },


	       onClickLeft() {
             this.$router.push({
                 path:'/banner'
             })
		    }


		}
//  components: {
//      BanVeriFy
//
//  }

    }
</script>
<style scoped="scoped">
  .state_c_yellow{
    color: #FD9F4CFF;vertical-align: middle;font-size: 13px;display: inline-block;margin-top: 0.1vh;
  }
  .state_c_red{
    color: #FF4242FF;vertical-align: middle;font-size: 13px;display: inline-block;margin-top: 0.1vh;
  }
  .state_c_green{
    color: #44F8C3FF;vertical-align: middle;font-size: 13px;display: inline-block;margin-top: 0.1vh;
  }
  .state_c_yellow >>> .van-icon-underway-o{
      margin-top: -0.4vh;
      margin-right: 0.2vh;
      color: #FD9F4CFF !important;
  }
  .state_c_green >>> .van-icon-passed{
      margin-top: -0.4vh;
      margin-right: 0.2vh;
      color: #44F8C3FF !important;
  }
  .state_c_red >>> .van-icon-close{
      margin-top: -0.4vh;
      margin-right: 0.2vh;
      color: #FF4242FF !important;
  }
	.xuan_school>>> .van-tabs__content{
		margin: 2vw;

	}
  .normal_btn{
    color: #999999FF;
    border:1px solid #CCCCCCFF;
  }
  .green_btn{
    color: #44F8C3FF;
    border:1px solid #44F8C3FF;
  }

	.clollect_list{
		background: #FFFFFF;
		padding: 2vh;
		text-align: left;
		margin-bottom: 1vh;

	}
	#dayin >>> .van-button--plain{
		color: #FFFFFF;
		background: #4C9FFDFF;
		border:#4C9FFDFF;
	}
  .red_btn{
    color: #FFFFFF;
    background: #FF4242FF;
    border:#FF4242FF;
  }

	#dayin >>> .van-icon{
		color: #44F8C3FF;
	}
	.collect_listcontent{
		align-items: center;
		display: flex;
		justify-content: space-between;
	}
    .collect_listcontent p:first-child{
        /* background-color: #FF4242; */
        width: 33vh;
    }
    .collect_listcontent p{
        font-size: 0.9rem;
    }

	.danwei >>> .van-field__control{
		width: 25%;
		vertical-align: middle;
	}
	.xuan_school >>> .van-icon{
    color: rgb(44, 62, 80);
		vertical-align: middle;

	}
	.xuan_school >>> .van-button--large {
	    width: 70%;
	    height: 50px;
	    line-height: 48px;
	    margin-top: 4vh;
    }
	.xuan_school>>> .van-tabs__line{
		background-color: #4C9FFDFF;

	}
	.xuan_school >>> .van-cell{
		padding: 14px 3px !important;
	}
	.xuan_school >>> [class*=van-hairline]::after{
		border-bottom: 0 solid #FFFFFF;
	}
	.Img_sre_contet{
		margin-top: 14vh;
		width: 50%;
		height: 50%;
	}
	.list_header{
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		line-height:1vh;
		padding: 3vw;
		height: 1vh;
		display: flex;
		font-size: 13px;
		justify-content: space-between;
		border-bottom: 1px solid #F6F6F6FF;
	}
	.list_bottom{
		display: flex;
		justify-content: space-between;
	}
	.list_bottom div{
		text-align: center;

	}
	.list_bottom div .span_one{
		font-size:13px;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.list_bottom div .span_two{
		margin-top: 1vh;
		display: inline-block;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		font-size: 13px;
	}
	.xuan_school .van-list{
		background: #F6F6F6FF !important;
	}
	.xuan_school{
		background: #F6F6F6FF !important;
	}
	.xuan_school >>> .van-list{
		background: #F6F6F6FF;
	}
	.list-content{
        margin-top:46px;
        overflow:scroll;
    }
    .list-item{
        text-align:center;
    }
    .child_list_item{
    	font-size: 15px;
    	vertical-align: middle;
    }
	.lun_bo{
		height: 24vh;
	}
	.header >>> .van-nav-bar__title{
		color: #000;
	}
	.lun_bo >>>.van-swipe{
		height: 100%;
	}
	.data_picker_color{
		color: #FF4242;
		font-size: 20px;
		margin-left: 2vh;
	}
	.child_list_two{
		color: #999999;
		font-size: 13px;
	}
	.uploader_img{
		margin-top: 2vh;
		display: flex;
		justify-content: space-between;
		margin: 12px;
	}
	/*.Assen_action{
		padding: 0;
		margin: 2vh;
		display: flex;
		justify-content: space-between;
	}*/
	.Assen_action{
		padding: 0;
		margin: 1.2vh;
	}
	.Assen_action img{
		width: 28vw;

	}
	.Assen_action .suliao_ping{
		display: flex;
		margin-top: 1.5vh;
		justify-content: space-between;

	}
	p{
		margin: 0;
		padding: 0;
	}
	.Assen_action
	.Assen_action p{
		text-align: center;
		text-align: left;
		margin: 0;
		padding: 0;
		font-size: 12px;
	}

	.div_content_Assen{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
.Assen_action .p_content_con{
	font-size: 15px;
	text-align: left;
 /* display: flex;*/
  /*justify-content: space-between;*/
	/*margin-top: 1.1vh;*/
}

.Assen_item_one img {
	margin-right: 2vw;
}
.p_Assion_july{

	color: #999999;
	margin-top: 0.5vh !important;
}

.xuan_school{
	background:rgb(246,246,246);
	height: 100vh;
}
.Assen_action{
	  /*padding-top: 3vh;*/
    background: #fff;
    /*padding-bottom: 3vh;*/
    padding-left: 2vw;
    padding-right: 2vw;
    border-radius: 1vh;
}
.list_bottom{
	padding: 3vh;
}
.Door_recy{
	height: 15vh;
	background: #FFFFFF;
	text-align: left;
	margin: 1.5vh;
	border-radius: 1vh;
}
.Door_recy_item_one{
	display: flex;
	margin: 2vh;
	height: 5vh;
	line-height: 5vh;
	/*border-bottom: 0.5px solid #999;*/
	justify-content: space-between;
	color: #999999;
	font-size: 13px;
	/*border-bottom: 0.5px solid #CCCCCC;*/
}

.end_content{
	display: flex;
	justify-content: space-around;
	font-size: 15px;

}
.end_time_content{
	display: flex;
	justify-content: space-between;
	color: #999999;
	margin-left: 2vh;
	margin-right: 2vh;


}
.end_time_content div{
	text-align: center;
}


p{
	margin: 0;
	padding: 0;
}

.time_content_iten_one p:nth-child(1){
	color: #000000;
}
.time_content_iten_one p:nth-child(2){
	font-size: 12px;
	margin-top: 1vh;

}
.coll_content >>> .van-icon-close{
    color: rgb(255, 66, 66);
}
.van-icon-clock-o{
    color: rgb(253, 159, 76) !important;
}



 </style>
